Activity

Html es un lenguaje de etiquetas que para entender que esto de "lenguaje de etiquetas" lo puedes pensar como algo que haces para dar estructura a una pagina web, así que el html es como las vigas de tu sitio web es como una base, ya despues lo puedes modificar con CSS y JavaScript.

Etiquetas Básicas

Otras etiquetas importantes son: header (Encabezado): Es la parte superior. Aquí suele ir el logo, el nombre de la página y el menú de navegación. Es como la portada de un libro. nav (Navegación): Se usa específicamente para los menús con enlaces. section(Sección): Se usa para agrupar contenido relacionado. Por ejemplo, en un blog, una sección podría ser "Comentarios" y otra "Artículos Relacionados". article (Artículo): Es un bloque de contenido que tiene sentido por sí mismo, como una noticia, un post de blog o una receta. Si lo sacas de la web y lo pones en otra, se seguiría entendiendo. aside(Barra lateral): Contenido que está relacionado de forma indirecta. Por ejemplo, datos curiosos, publicidad o biografías cortas del autor a un lado del texto principal. footer (Pie de página): Es la parte final de la web. Aquí pones el copyright, redes sociales o información de contacto.

Para hacer listas desordenas y ordenadas

puedes pensar en lo siguiente hay dos tipos de listas la ordenada y desordenada, la ordenada es como una lista de compras donde el orden importa, mientras que la desordenada es como una lista de tareas donde el orden no importa. Para hacer la desordenada usas la etiqueta ul y para la ordenada usas la etiqueta ol, dentro de estas etiquetas usas la etiqueta li para cada elemento de la lista.

Crear una tabla

Las tablas son un poco más elaboradas, porque necesitamos hacer una "cuadrícula" (como en Excel). Para hacerla, vamos construyendo de afuera hacia adentro usando estas etiquetas: table: Es la caja gigante que contiene toda la tabla. tr: Significa Table Row (Fila de tabla). Representa un renglón horizontal. th: Significa Table Header (Encabezado de tabla). Se usa en el primer renglón para poner los títulos de las columnas (el texto suele salir en negritas). td: Significa Table Data (Datos de tabla). Es la "celda" normal donde pones la información en los renglones de abajo. Para crear una tabla usas la etiqueta table, dentro de esta etiqueta usas la etiqueta tr para cada fila, y dentro de cada fila usas la etiqueta td para cada celda.

CSS introducción

CSS es un lenguaje de estilos que se utiliza para describir la presentación de un documento HTML. Con CSS puedes controlar el diseño, los colores, las fuentes, el espaciado y otros aspectos visuales de tu sitio web. Es como la ropa que le pones a tu sitio web para que se vea bonito y atractivo.

Ahora ya que tienes HTML que podrían decirse que son los ladrillos y el esqueleto de tu sitio, ahora usamos CSS que es como el diño de interiores decide los colores, las fuentes, el tamaño, el espaciado, etc. para que tu sitio se vea bonito y atractivo.
Para aplicar CSS a tu HTML tienes 3 opciones:
1. CSS en línea: Es cuando aplicas el estilo directamente en la etiqueta HTML usando el atributo "style". Por ejemplo: <h1 style="color: blue;">Hola Mundo</h1>
2. CSS interno: Cuando escribes el codigo CSS dentro de tu archivo HTML usando la etiqueta <style> dentro del <head>. Por ejemplo: <style> h1 { color: blue; } </style>
3. CSS externo: Es la forma más común y recomendada, es cuando creas un archivo separado con extensión .css donde escribes todo tu código CSS y luego lo enlazas a tu archivo HTML usando la etiqueta <link> dentro del <head>. Por ejemplo: <link rel="stylesheet" href="estilos.css">
Regla y selector:
Dentro de CSS tenemos reglas y selesctores, pero que es eso?
Una Regla CSS es la instrucción completa de diseño que le damos a la computadora. Imagina que le dices a un pintor: "Pinta todas las puertas de color rojo". Esa frase completa es la regla.
Para que esto funcione entra el selector, y se divide en partes:
El Selector: Es la parte de la regla que busca y "selecciona" a qué elemento de tu HTML le vas a cambiar el diseño (en nuestra analogía, serían "las puertas").
La Declaración: Es lo que va entre llaves { } e indica qué quieres cambiar (la propiedad, ej: el color) y cómo lo vas a dejar (el valor, ej: rojo).
Ejemplo de cómo se escribe una Regla CSS:
p {
color: blue;
font-size: 20px;
}

Donde:
p es el Selector (le dice al navegador: "busca todos los párrafos de texto").
Todo el bloque completo es la Regla CSS (que dice: "haz que la letra sea azul y de tamaño 20 pixeles").

CSS Básico

Si usas la etiqueta <p> para hacer 10 párrafos en tu HTML, pero en CSS dices "pinta los <p> de rojo", ¡los 10 se van a pintar de rojo! ¿Qué pasa si solo querías pintar uno?
Ahí es donde entran las Clases y los IDs. Son como "gafetes con tu nombre" que le pegas a tus elementos HTML para que CSS los pueda reconocer de forma individual o en grupos.
¿Qué es una Clase y qué es un ID?
Clase (Class): Imagina que es como el uniforme de un equipo. Muchas personas pueden usar el mismo uniforme. Si le pones una clase llamada destacado a varios textos o imágenes, a todos les puedes aplicar el mismo diseño a la vez. ID (Identificador): Imagina que es como el número de pasaporte. Es único. Solo un elemento en toda tu página web puede tener ese ID específico. Sirve para apuntar a un elemento muy particular (como el logo principal o el menú de arriba). ¿Cómo se relacionan con CSS? En HTML tú le pegas el gafete al elemento (ej.

Hola

), y luego en CSS usas los selectores para buscar esos gafetes y darles estilo.

Ejemplo de Selectores en CSS:

1. Tag Selector (Selector de Etiqueta)
Busca a los elementos por su nombre de etiqueta HTML, sin importar nada más.
Ejemplo en CSS: p { color: blue; }
¿Qué hace?: Pinta todos los párrafos de tu página de azul.
2. Class Selector (Selector de Clase)
Busca cualquier elemento que tenga una clase específica. En CSS, las clases siempre empiezan con un punto (.).
Ejemplo en CSS: .destacado { color: red; }
¿Qué hace?: Pinta de rojo cualquier cosa que tenga esa clase, ya sea un párrafo, un título o una tabla.
3. Tag and Class Selector (Selector de Etiqueta y Clase)
Es más estricto. Busca una etiqueta específica que además tenga una clase específica. Se escriben juntos, sin espacios.
Ejemplo en CSS: p.destacado { color: green; }
¿Qué hace?: Pinta de verde solo a los párrafos que tengan la clase "destacado". Si un título <h1> tiene esa misma clase, lo va a ignorar porque no es un párrafo.
4. Id Selector (Selector de ID)
Busca al elemento único que tiene ese ID. En CSS, los IDs siempre empiezan con el símbolo de gato o numeral (#).
Ejemplo en CSS: #titulo-principal { font-size: 50px; }
¿Qué hace?: Le cambia el tamaño de letra únicamente al elemento que tiene el ID "titulo-principal".

CSS Box Model

Este es el concepto visual más importante del diseño web. En internet, absolutamente todo es una caja rectangular , incluso si visualmente es un círculo o solo un texto.
Cada una de estas "cajas" está formada por 4 capas, como si fuera un cuadro colgado en la pared:
1. Content (Contenido): Es la foto en sí. El texto, la imagen o lo que sea que pusiste en tu HTML.
2. Padding (Relleno interno): Es el espacio entre la foto y su marco (la "marialuisa" o paspartú del cuadro). Da aire hacia adentro.
3. Border (Borde): Es el marco de madera de tu cuadro. Puede ser grueso, delgado, de colores o invisible.
4. Margin (Margen externo): Es el espacio invisible que hay fuera del marco. Es la distancia entre tu cuadro y el cuadro del vecino en la misma pared. Empuja a los demás elementos para que no se amontonen.

Media Queries

¿Te has fijado que una página web se ve de una forma en tu computadora, pero si la abres en tu celular, el menú cambia y las columnas se apilan para que quepa en la pantalla? Eso se logra con las Media Queries.
Son una forma de hacerle una "pregunta" al navegador de tu usuario antes de aplicar el diseño. Le dicen al CSS:
"Oye, si la pantalla de este usuario es más pequeña que el tamaño de un celular, entonces ignora las reglas anteriores y aplica estas reglas nuevas".

Ejemplo de Media Query en CSS:

/* Regla normal para computadoras: */
p { font-size: 20px; }
/* Media Query: Si la pantalla mide 600px de ancho o menos (celulares): */
@media (max-width: 600px) {
p { font-size: 14px; } /* Haz la letra más chiquita para que quepa */
}

Layout CSS

Para acomodar elementos en tu pagina, existen actualmente flex y grid.
Estas dos herramientas son "sistemas de diseño" que le dicen a la computadora cómo organizar las cajas (el Box Model que vimos antes) dentro de tu pantalla.
Display: Flex
Piensa en Flexbox como un estante o una repisa. Está diseñado para acomodar cosas en una sola dirección a la vez: ya sea en una fila (horizontal) O en una columna (vertical).
Es perfecto para alinear elementos, centrarlos perfectamente o distribuir el espacio sobrante entre ellos de forma equitativa.
Ejemplo conceptual: Si tienes una caja con 3 botones adentro, por defecto se pondrían uno debajo del otro. Pero si a la caja padre le pones display: flex, los botones se formarán automáticamente en una sola línea horizontal.
Display: Grid
Si Flexbox es un estante, Grid es un tablero de ajedrez o una hoja de Excel. Está diseñado para trabajar en dos direcciones al mismo tiempo: filas Y columnas.
Con Grid, tú dibujas una cuadrícula invisible en tu página y luego decides en qué "celda" exacta va cada elemento.
Incluso puedes hacer que un elemento ocupe varias celdas a la vez (por ejemplo, un título gigante que cruce toda la parte superior).

Create an html challenge

Apply a css framework to your nonatlas clone page. (Screenshot)

Para este reto, decidí usar el framework de Bootstrap, que es como un kit de herramientas pre-hecho para diseñar páginas web de forma rápida y fácil. Lo bueno de Bootstrap es que ya tiene estilos y componentes listos para usar, como botones, tarjetas, menús de navegación, etc. Solo tienes que agregar las clases correctas a tus elementos HTML y ¡voilà! Tienes un diseño profesional sin tener que escribir mucho CSS desde cero.
Para usar Bootstrap, lo primero que hice fue incluir el enlace a su archivo CSS en la sección <head> de mi archivo HTML. Esto se hace con la etiqueta <link>, que le dice al navegador: "Oye, ve a esta dirección y trae el estilo de Bootstrap para que lo uses en mi página".

Antes:

Después:

Actividad Explicacion de HTML, CSS y JavaScript

Introducción: Primero que es el HTML?